<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of Electrostatic Image Charge</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450" style="border:1px solid #000000;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style Settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    
    // --- Coordinate Transformation ---
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    ctx.translate(centerX, centerY);

    // --- Drawing Parameters ---
    const a = 90;
    const pointRadius = 4;
    const axisLength = 180;
    const tickLength = 10;
    const tickSpacing = 45;

    // --- Draw Vertical Conductor Line (S) ---
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(0, -axisLength);
    ctx.lineTo(0, axisLength);
    ctx.stroke();

    // --- Draw Ticks on Vertical Line ---
    ctx.lineWidth = 1;
    for (let i = -3; i <= 3; i++) {
        if (i === 0) continue;
        const y = i * tickSpacing;
        ctx.beginPath();
        ctx.moveTo(-tickLength / 2, y);
        ctx.lineTo(tickLength / 2, y);
        ctx.stroke();
    }
    
    // --- Draw Horizontal Dashed Line ---
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.setLineDash([6, 4]);
    ctx.moveTo(-centerX, 0);
    ctx.lineTo(centerX, 0);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // --- Draw Point Charges Q and Q' ---
    // Q'
    ctx.beginPath();
    ctx.arc(-a, 0, pointRadius, 0, 2 * Math.PI);
    ctx.fill();
    // Q
    ctx.beginPath();
    ctx.arc(a, 0, pointRadius, 0, 2 * Math.PI);
    ctx.fill();

    // --- Draw Labels ---
    // Q' label
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText("Q'", -a, -28);
    // Tilde over Q'
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(-a - 8, -43);
    ctx.quadraticCurveTo(-a, -51, -a + 8, -43);
    ctx.stroke();

    // Q label
    ctx.fillText("Q", a, -28);
    // Tilde over Q
    ctx.beginPath();
    ctx.moveTo(a - 8, -43);
    ctx.quadraticCurveTo(a, -51, a + 8, -43);
    ctx.stroke();

    // σ label
    ctx.font = '24px "Times New Roman"';
    ctx.fillText("σ", 0, -axisLength - 20);

    // S label
    ctx.fillText("S", 0, axisLength + 20);

    // 'a' labels
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText("a", -a / 2, 25);
    ctx.fillText("a", a / 2, 25);

    // "导体" (Conductor) label
    ctx.font = '22px "SimSun"';
    ctx.fillText("导体", -60, 100);

    // --- Draw Force Vector F ---
    const arrowStart = a;
    const arrowLength = 90;
    const arrowEnd = arrowStart + arrowLength;
    const arrowHeadSize = 10;
    ctx.lineWidth = 2.5;
    ctx.beginPath();
    ctx.moveTo(arrowStart, 0);
    ctx.lineTo(arrowEnd, 0);
    ctx.stroke();
    // Arrowhead
    ctx.beginPath();
    ctx.moveTo(arrowEnd, 0);
    ctx.lineTo(arrowEnd - arrowHeadSize, -arrowHeadSize / 1.8);
    ctx.moveTo(arrowEnd, 0);
    ctx.lineTo(arrowEnd - arrowHeadSize, arrowHeadSize / 1.8);
    ctx.stroke();

    // F label
    ctx.font = 'italic 28px "Times New Roman"';
    ctx.fillText("F", a + arrowLength - 20, -25);

    // --- Draw Figure Caption ---
    ctx.font = '22px "SimSun"';
    ctx.fillText("图 1", 0, centerY - 35);

</script>
</body>
</html>